Rounded Images
The w3-round classes add rounded corners to an image:
w3-round-small:
w3-round:
w3-round-large:
w3-round-xlarge:
w3-round-xxlarge:
Image in a Circle
The w3-circle class shapes an image to a circle:
Bordered Image
The w3-border class adds borders around the image.
Padding added wil be inside the borders:
More padding:
Responsive Image
An image can be set to automatically resize itself to fit the size of its container.
If you want the image to scale down if it has to, but never scale up to be larger than its original size, use the w3-image class.
Resize the browser window to see the effect.
Responsive Image
An image can be set to automatically resize itself to fit the size of its container.
All you have to do is set the image width to 100%:
Resize the browser window to see the effect.
Responsive Image
An image can be set to automatically resize itself to fit the size of its container.
All you have to do is set the image width to 100%.
If you want to restrict a responsive image to a maximum size, use the max-width property:
Resize the browser window to see the effect.
Opacity/Transparency
The w3-opacity classes adds transparency to an element.
Normal (100% opacity):
w3-opacity-min (75% opacity):
w3-opacity (60% opacity):
w3-opacity-max (25% opacity):
Grayscale Effect
The w3-grayscale classes add a grayscale effect to an element.
Note: The w3-grayscale classes are not supported in IE 11 and earlier versions.
Normal:
w3-grayscale-min:
w3-grayscale:
w3-grayscale-max (black and white):
Sepia Effect
The w3-sepia classes add a sepia effect to an element.
Note: The w3-sepia classes are not supported in IE 11 and earlier versions.
Normal:
w3-sepia-min:
w3-sepia:
w3-sepia-max:
Hover Effect
You can also add special effects on hover/mouse-over.
Note: The w3-hover-sepia and w3-hover-grayscale classes are not supported in IE 11 and earlier versions.
w3-hover-opacity:
w3-hover-grayscale:
w3-hover-sepia:
Hoverable Image
The w3-hover-opacity class adds transparency to the image when you move the mouse over it:
The w3-hover-opacity-off class rempves transparency from an image when you move the mouse over it:
Constructing a Photo Album
Summer 2015
5 Terre
Monterosso
Vernazza
Manarola
Corniglia
